{{#if passiveError}}
    <div class="ui-bar ui-bar-a">
        {{passiveError}}
    </div>
{{/if}}
{{#ifEqual appearance "grid"}}
    <form>
        {{> labelHint}}
            <div class="ui-grid-b">
            {{#each choices}}
                <div class="ui-block-{{colLetter}}">
                    <div class="ui-bar
                    {{#if checked}}
                        ui-bar-e
                    {{else}}
                        ui-bar-c
                    {{/if}} grid-select-item">
                        <input
                            {{#if ../select_one}}
                                type="radio"
                            {{else}}
                                type="checkbox"
                            {{/if}}
                            {{#if checked}}
                                checked="checked"
                            {{/if}}
                            
                            {{! the name attribue has to be the same for all the options}}
                            style="display:none;"
                            name="{{../name}}"
                            id="{{name}}"
                            value="{{name}}" />
                    {{#if image}}
                        <center>
                            <img  style="max-width: 100%;max-height: 100%;" src="{{formDirectory}}{{localize image}}"></img>
                        </center>
                    {{/if}}
                    {{#if label}}
                        {{#substitute}}{{localize label}}{{/substitute}}
                    {{/if}}
                    </div>
                </div>
            {{/each}}
            </div><!-- /grid-b -->
        {{#unless required}}
            {{#if false}}
            {{#if deselect}}
                <a data-role="button" data-mini="true" class="deselect">{{localize deselect}}</a>
            {{/if}}
            {{/if}}
        {{/unless}}
        <div style="clear:both;"></div>
    </form>
{{else}}
{{#ifEqual appearance "inline"}}
    <form>
        <div class="inline-label-container">
            {{> labelHint}}
        </div>
        <fieldset
        data-role="controlgroup"
        data-type="horizontal"
        style="float:right;margin-left:1em;display:block;"
        {{#eachProperty inputAttributes}}
            {{property}}="{{value}}"
        {{/eachProperty}}
        >
            {{#each choices}}
                <label>
                    <input
                        {{#if ../select_one}}
                            type="radio"
                        {{else}}
                            type="checkbox"
                        {{/if}}
                        {{#if checked}}
                            checked="checked"
                        {{/if}}
                        
                        {{! the name attribue has to be the same for all the options}}
                        name="{{../name}}"
                        id="{{name}}"
                        value="{{name}}" />
                {{#if image}}
                    <div>
                        <img src="{{formDirectory}}{{localize image}}"></img>
                    </div>
                {{/if}}
                {{#if label}}
                    {{#substitute}}{{localize label}}{{/substitute}}
                {{/if}}
                </label>
            {{/each}}
        </fieldset>
        {{#unless required}}
            {{#if false}}
            {{#if deselect}}
                <div style="clear:both;"></div>
                <a data-role="button" data-mini="true" class="deselect inline-deselect">{{localize deselect}}</a>
            {{/if}}
            {{/if}}
        {{/unless}}
        <div style="clear:both;"></div>
    </form>
{{else}}
{{#ifEqual appearance "dropdown"}}
    <form>
        {{> labelHint}}
        <select name="{{name}}">        
            {{#each choices}}
                <option 
                    {{#if checked}}
                        selected="selected"
                    {{/if}}
                    value="{{name}}">
                    {{localize label}}
                </option>
            {{/each}}
        </select>
    </form>
{{else}}
    <form>
        {{> labelHint}}
        <fieldset data-role="controlgroup"
            {{#eachProperty inputAttributes}}
                {{property}}="{{value}}"
            {{/eachProperty}}
            >
            {{#each choices}}
                <label>
                    <input
                        {{#if ../select_one}}
                            type="radio"
                        {{else}}
                            type="checkbox"
                        {{/if}}
                        {{#if checked}}
                            checked="checked"
                        {{/if}}
                        
                        {{! the name attribue has to be the same for all the options}}
                        name="{{../name}}"
                        id="{{name}}"
                        value="{{name}}" />
                {{#if image}}
                    <div>
                        <img src="{{formDirectory}}{{localize image}}"></img>
                    </div>
                {{/if}}
                {{#if label}}
                    {{#substitute}}{{localize label}}{{/substitute}}
                {{/if}}
                </label>
            {{/each}}
            {{#if withOther}}
                <label>
                    <input
                        {{#if select_one}}
                            type="radio"
                        {{else}}
                            type="checkbox"
                        {{/if}}
                        {{#if other.checked}}
                            checked="checked"
                        {{/if}}
                        name="{{name}}"
                        id="other"
                        value="other"
                        />
                        <label for="other">
                            Other:
                            {{#if other.checked}}
                            <input
                                name="otherValue"
                                value="{{other.value}}"
                                style="height:36px;position:initial;"
                                />
                            {{/if}}
                        </label>
                </label>
            {{/if}}
        </fieldset>
        {{#unless required}}
            {{#if false}}
            {{#if deselect}}
                <a data-role="button" data-mini="true" class="deselect">{{localize deselect}}</a>
            {{/if}}
            {{/if}}
        {{/unless}}
        <div style="clear:both;"></div>
    </form>
{{/ifEqual}}
{{/ifEqual}}
{{/ifEqual}}
